<script setup lang="ts">
import {getPlayerStore} from "@/store";
import {computed} from "vue";

const playerStore = getPlayerStore();

const loopMethod = computed(() => playerStore.getLoopMethod);

function handleChangeLoopMethod(method: typeof loopMethod.value) {
  playerStore.setLoopMethod(method)
}
</script>

<template>
  <svg @click="handleChangeLoopMethod('single-loop')" v-if="'list-loop'===loopMethod" class="icon" fill="currentColor"
       height="20" version="1.1"
       viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
    <path
        d="M659.63 879.59H364.29c-40.13 0-79.07-8.3-115.72-24.67-35.3-15.76-66.97-38.3-94.14-66.99-55.64-58.75-86.28-136.77-86.28-219.7 0-82.92 30.64-160.94 86.28-219.7 27.17-28.69 58.84-51.23 94.14-67 36.65-16.37 75.58-24.67 115.72-24.67h295.34c10.15 0 20.37 0.54 30.38 1.62 13.18 1.41 22.72 13.24 21.3 26.42s-13.24 22.72-26.42 21.3c-8.31-0.89-16.81-1.34-25.26-1.34H364.29c-66.03 0-128.18 27.23-175.01 76.67-47.16 49.8-73.13 116.1-73.13 186.69s25.97 136.89 73.13 186.69c46.82 49.44 108.97 76.67 175.01 76.67h295.34c66.03 0 128.18-27.23 175.01-76.67 47.16-49.8 73.13-116.1 73.13-186.69 0-13.25 10.75-24 24-24s24 10.75 24 24c0 82.92-30.64 160.94-86.28 219.69-27.17 28.69-58.84 51.23-94.14 67-36.65 16.38-75.59 24.68-115.72 24.68z"></path>
    <path
        d="M896.94 260.76l-185.33-107c-15.48-8.94-34.83 2.23-34.83 20.11v214c0 17.88 19.35 29.05 34.83 20.11l185.33-107c15.48-8.94 15.48-31.28 0-40.22z"></path>
  </svg>

  <svg @click="handleChangeLoopMethod('list-random')" v-else-if="'single-loop'===loopMethod" class="icon"
       fill="currentColor"
       height="20" width="20"
       viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
    <path
        d="M1013.76 565.248c-0.512-15.872-14.336-29.184-30.72-29.184-1.536 0-3.072 0-5.12 0.512-14.336 2.56-25.6 15.872-25.6 31.232-0.512 142.848-117.248 259.584-260.608 259.584H333.824c-145.408 0-263.68-118.272-263.68-263.68s118.272-264.192 263.68-264.192h500.224V389.12l162.304-121.856-162.304-121.856v91.648H335.872C156.16 237.568 10.24 383.488 10.24 562.688s145.92 325.632 325.632 325.632h356.352c177.664 0 322.048-144.384 322.048-321.024l-0.512-2.048z"
    ></path>
    <path
        d="M564.736 729.6V379.392H495.616v11.776c0 18.432-4.608 32.256-13.824 41.472-9.216 9.216-22.528 13.824-39.424 13.824h-12.8V506.88h55.296v222.72h79.872z"
    ></path>
  </svg>

  <svg @click="handleChangeLoopMethod('list-order')" v-else-if="'list-random'===loopMethod" class="icon"
       viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
       width="20" height="20">
    <path
        d="M961.6 276.992l-169.408 117.44a25.6 25.6 0 0 1-40.192-21.056V288h-2.112a224 224 0 0 0-189.952 105.28l-169.6 271.36A288 288 0 0 1 146.112 800H96a32 32 0 0 1 0-64h50.112a224 224 0 0 0 189.952-105.28l169.6-271.36A288 288 0 0 1 749.888 224h2.112V138.56a25.6 25.6 0 0 1 40.192-20.992l169.408 117.376a25.6 25.6 0 0 1 0 42.048zM96 224a32 32 0 1 0 0 64h50.112a224 224 0 0 1 189.952 105.28l4.8 7.68a32 32 0 0 0 54.272-33.92l-4.8-7.68A288 288 0 0 0 146.112 224H96z m459.136 399.04a32 32 0 1 0-54.272 33.92l4.8 7.68a288 288 0 0 0 244.224 135.36h2.112v85.376a25.6 25.6 0 0 0 40.192 21.056l169.408-117.44a25.6 25.6 0 0 0 0-42.048l-169.408-117.376a25.6 25.6 0 0 0-40.192 20.992V736h-2.112a224 224 0 0 1-189.952-105.28l-4.8-7.68z"></path>
  </svg>

  <svg @click="handleChangeLoopMethod('list-loop')" v-else-if="'list-order'===loopMethod" class="icon"
       viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
       width="20" height="20" fill="currentColor">
    <path
        d="M46.545455 408.565657h879.191919v103.434343H46.545455v-103.434343z m0-258.585859h879.191919v103.434343H46.545455v-103.434343z m724.040404 413.737374l206.868686 155.151515-206.868686 155.151515v-103.434343H46.545455v-103.434344h724.040404v-103.434343z"
    ></path>
  </svg>
</template>

<style scoped lang="less">

</style>
